<template>
    <div>
        <van-nav-bar title="首页" />
        <spen></spen>
        <swip></swip>
        <van-grid :column-num="4">
            <van-grid-item v-for="item in catitems" :icon="item.image_src" .text="item.name" />
        </van-grid>
        <van-grid :column-num="4">
            <van-grid-item v-for="item in catitems" :icon="item.image_src" .text="item.name" />
        </van-grid>
        <div>距离本场结束还有 <van-count-down :time="time" format="08: 24:29" /></div>
        <div class="till">
            <div style="width: 100%;height: 120px;background: salmon;"><img src="../../img/1.png" alt=""></div>
            <div style="width: 100%;height: 110px;background: salmon;"><img src="../../img/2.png" alt=""></div>
            <div style="width: 100%;height: 230px;background: salmon;"><img src="../../img/2.png" alt=""></div>
            <div style="width: 100%;height: 250px;background: salmon;"><img src="../../img/1.png" alt=""></div>
        </div>

    </div>
</template>

<script setup>
import swip from '@/components/swip.vue';
import spen from '@/components/spen.vue';
import { ref } from 'vue';
import { catitemsApi } from '@/api/api'
let catitems = ref([])
catitemsApi().then(res => {
    console.log('导航数据', res);
    catitems.value = res.data.message
})
</script>

<style lang="scss" scoped>
.till {
    column-count: 2;
    column-gap: 20px;

    div {
        float: left;
        margin-top: 40px;
    }

    img {
        width: 100%;
    }
}
</style>